<template>
  <div>
    <vxe-table
      align="left"
      :data="tableData"
      size="small"
      border
      min-height="0"
    >
      <vxe-column field="code" title="会议ID" />
      <vxe-column field="name" title="会议主题" width="12%" />
      <vxe-column field="start" title="会议开始时间" />
      <vxe-column field="time" title="预计会议时长" />
      <vxe-column field="address" title="会议地点" />
      <vxe-column field="people" title="组织人" />
      <vxe-column field="type" title="会议类型" />
      <vxe-column field="desc" title="会议描述" width="20%" />
      <vxe-column title="操作" width="100">
        <template #default="{ row }">
          <el-text type="danger">{{ row.status }}</el-text>
        </template>
      </vxe-column>
      <!-- <vxe-column title="操作" width="80">
        <template #default="{ row }">
          <el-link type="primary">详情</el-link>
        </template>
      </vxe-column> -->
    </vxe-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    setup() {
      const state = reactive({
        tableData: [
          {
            code: 'XXXXXX',
            name: '2023年上半年立项评审会',
            start: '2023/10/02 10:00',
            time: 'XXXXXX',
            address: 'XXXXXX',
            people: 'XXXXXX',
            type: '评审会议',
            desc: 'XXXXXX',
            status: '待开始',
          },
          {
            code: 'XXXXXX',
            name: '2023年上半年立项评审会',
            start: '2023/10/02 10:00',
            time: 'XXXXXX',
            address: 'XXXXXX',
            people: 'XXXXXX',
            type: '评审会议',
            desc: 'XXXXXX',
            status: '待开始',
          },
          {
            code: 'XXXXXX',
            name: '2023年上半年立项评审会',
            start: '2023/10/02 10:00',
            time: 'XXXXXX',
            address: 'XXXXXX',
            people: 'XXXXXX',
            type: '评审会议',
            desc: 'XXXXXX',
            status: '待开始',
          },
        ],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          pageNo: 1,
          pageSize: 30,
        },
      })

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
      }

      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
      }

      return { ...toRefs(state), handleSizeChange, handleCurrentChange }
    },
  })
</script>

<style scoped></style>
